import './style/index.less';
import './style/e8tabs1_wev8.css';
import '../../util/logListUtil';
import * as mobx from 'mobx';
import {Row, Col, Icon, Pagination, Menu, Form, Button, Spin} from 'antd';
import LogItem from './LogItem'
import {inject, observer} from "mobx-react";
import {Condition, getAdButtons} from './SearchCondition';
import {WeaTab, WeaNewScrollPagination, WeaLocaleProvider} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }



    componentDidMount() {
        //滚动加载
        const _this = this;
        const scrollObj = jQuery(".wf-req-form-scroll");
        scrollObj.scroll(function () {
            const {logListStore} = _this.props;
            const {loading = false, requestLogParams = {}, logList = [], logCount = 0, scrollLoadSign, logParams = {}} = logListStore;
            const {loadmethod = 'split'} = requestLogParams;
            const top = jQuery(this).scrollTop();
            if (loadmethod == 'scroll') {
                const windowheight = scrollObj.height();
                const bodyheight = jQuery('.wf-req-form-wrapper').height();
                const {pgnumber = 1, maxrequestlogid = 0} = logParams;
                //无限滚动加载
                const canLoadHeight = bodyheight - (top + windowheight);
                const canLoad = canLoadHeight < 200 && canLoadHeight > 0;
                if (canLoad && !loading && logList.length < logCount ) {
                    scrollLoadSign({pgnumber: parseInt(pgnumber) + 1, maxrequestlogid: maxrequestlogid});
                }
            }
        });
    }

    componentDidUpdate() {
        const {logListStore} = this.props;
        const {logList = []} = logListStore;
        logList.length > 0 && window.formImgLazyLoad(jQuery('.wf-req-loglist'));//图片懒加载
    }


    onTabMounted = () => {
        setTimeout(() => {
            jQuery(".wf-sign-subsign-wrap").bind("hover", function () {
                setTimeout(function () {
                    let height = 500;
                    if (jQuery(".wf-req-sign-list").height() + 40 <= 500) {
                        height = jQuery(".wf-req-sign-list").height() + 40;
                    }
                    jQuery(".wf-sign-subsign-wrap  ul").css("maxHeight", height)
                }, 50)
            })
        },500)
    }
    getLogTabs() {
        const {logListStore} = this.props;
        const {requestLogParams = {}} = logListStore;
        const {isRelatedTome, hasMainWfRight, hasChildWfRight, hasParallelWfRight, isReadParallel, allrequestInfos=[],
          tablabel1 = '', tablabel2 = '', tablabel3 = '', tablabel4 = '', tablabel5 = ''
        } = requestLogParams;
        let mainWf = hasMainWfRight ? allrequestInfos.filter(w => w['type'] == 'main') : '';
        let childWf = hasChildWfRight ? allrequestInfos.filter(w => w['type'] == 'sub') : '';
        let parallelWf = hasParallelWfRight ? allrequestInfos.filter(w => w['type'] == 'parallel') : '';
        let tabDatas = [{title: tablabel1, key: "1"}];
        isRelatedTome && tabDatas.push({title: tablabel2, key: "2"});
        mainWf && tabDatas.push({title: tablabel3, key: "3"});
        childWf && tabDatas.push({
            title: <span>{tablabel4} <i className='icon-top-Arrow'/></span>,
            dropMenu: childWf,
            key: "4"
        });
        parallelWf && '1' == isReadParallel && tabDatas.push({
            title: <span>{tablabel5} <i className='icon-top-Arrow'/></span>,
            dropMenu: parallelWf,
            key: "5"
        });
        return tabDatas;
    }

    getSignshowname() {
        const {logListStore} = this.props;
        const {logListTabKey, requestLogParams = {}, refRequestId} = logListStore;
        let signshowname = '';
        const {allrequestInfos = []} = requestLogParams;
        logListTabKey > 2 && allrequestInfos.filter(reqinfo => {
            if (reqinfo.requestid == refRequestId) {
                signshowname = reqinfo.signshowname;
            }
        });
        return signshowname;
    }

    getTabButtons() {
        const {logListStore} = this.props;
        const {isShowUserheadimg, controllShowUserImg} = logListStore;
        return [
          (
            <i className='icon-search-Customer' 
               style={{color: isShowUserheadimg ? '#7287f2' : ''}}
               onClick={() => controllShowUserImg()}
            />
          )
          , (
           <span style={{fontSize: 16, color: '#d6d6d6'}}>|</span>
          )
        ]
    }

    changeData = (key, selecttabkey) => {
        if (key === '4' || key === '5') return;
        const {logListStore} = this.props;
        const {requestLogParams = {}, logListTabKey, changeLogListTab, updateLogParams, loadRefReqSignInfo} = logListStore;
        const {allrequestInfos = [], wfsignlddtcnt, userId} = requestLogParams;
        //计算tabkey
        let tmpkey = key;
        let params = {pgnumber: 1, maxrequestlogid: 0};
        allrequestInfos.filter(reqinfo => {
            const {requestid, type, relwfid, relviewlogs} = reqinfo;
            if (requestid == key || key === '3') {
                if (type == 'main') {
                    tmpkey = '3';
                    key = requestid;
                    params.isrequest = 3;

                }
                if (type == 'sub') {
                    tmpkey = '4';
                    params.isrequest = 2;
                }
                if (type == 'parallel') {
                    tmpkey = '5';
                    params.isrequest = 4;
                }
                params.requestid = requestid;
                params.workflowid = relwfid;
                params.viewLogIds = relviewlogs;
                params.wfsignlddtcnt = wfsignlddtcnt
                params.pgnumber = 1;
                params.maxrequestlogid = 0;
                params.loadmethod = 'split';
            }
        });
        changeLogListTab(tmpkey, key);
        if (key === '2') params.atmet = userId;
        if (key === '1') params.atmet = '';
        updateLogParams(params, true);
    }

    render() {
      const { 
        logListStore, setTabKey, isOpenCommunication, forward,forwardEvent,
        controlVariableMap,variableMap,secondAuthStore,showAuthDetail,closeAuthDetail 
      } = this.props;
      const { 
        logListTabKey, requestLogParams = {}, logList = [], isShowUserheadimg, refRequestId, 
        loading, logItemBaseParams, showSearchDrop,controllSearchDrop, setLogPagesize, updateLogParams,
        currentPage = 1, logCount = 0, logParams = {}
      } = logListStore;
      const {wfsignlddtcnt = 10,isprint = 0} = logParams;
      const {loadmethod = 'split'} = requestLogParams;
      const signListH = (showSearchDrop && jQuery('.wf-req-sign-list').height() < 330) ? {height: '330px'} : {};
      return (
          <div className='wf-req-sign'>
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ajh81m`}
                  buttons={this.getTabButtons()}
                  datas={this.getLogTabs()}
                  selectedKey={logListTabKey}
                  keyParam="key"  //主键
                  searchType={['drop']}
                  countParam='count'
                  hasDropMenu={true}
                  subMenuClass={"wf-sign-subsign-wrap"}
                  showSearchDrop={showSearchDrop}
                  onTabMounted={this.onTabMounted}
                  dropIcon={<i className='icon-search-search' style={{color: '#77da88'}}
                               onClick={() => controllSearchDrop(true)}/>}
                  searchsDrop={<Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@kswwfa`} logListStore={logListStore}/>}
                  buttonsDrop={getAdButtons(logListStore)}
                  onChange={this.changeData}/>
              {
                logListTabKey > 2 
                && logListTabKey != refRequestId 
                && <div className='wf-req-sign-main-sub'>
                    <span dangerouslySetInnerHTML={{__html: this.getSignshowname()}}/>
                </div>
              }
              <div className='wf-req-sign-list' style={signListH}>
                  {
                      logList.map((logitem) => {
                          const {logid,isProtected, checkSuccess,protectType} = logitem;
                          if (checkSuccess == "1") {
                              secondAuthStore.setCheckResult(logid, 1);
                          } else if (checkSuccess == "2") {
                              secondAuthStore.setCheckResult(logid, 0);
                          }
                          secondAuthStore.setIsProtected(logid,parseInt(isProtected));
                          secondAuthStore.setProtectType(logid,parseInt(protectType));
                          return (
                            <LogItem ecId={`${this && this.props && this.props.ecId || ''}_LogItem@0fwfap@${logid}`} 
                                {...logItemBaseParams}  
                                data={logitem} 
                                forward={forward} 
                                forwardEvent ={forwardEvent}
                                setTabKey={setTabKey}
                                isOpenCommunication={isOpenCommunication}
                                controlVariableMap={controlVariableMap}
                                variableMap={variableMap}
                                logListStore={logListStore}
                                secondAuthStore={secondAuthStore}
                                showAuthDetail={showAuthDetail}
                                closeAuthDetail={closeAuthDetail}
                                isprint={isprint}
                            />
                          )
                      })
                  }
                  {
                    loadmethod == 'split' 
                    && logList.length > 0 
                    && isprint != 1 
                    && <Pagination ecId={`${this && this.props && this.props.ecId || ''}_Pagination@1ccnct`} 
                        defaultCurrent={1} showQuickJumper
                        pageSize={wfsignlddtcnt}
                        onChange={(n) => {
                            updateLogParams({pgnumber: n}, true);
                            window.formImgLazyLoad(jQuery('.wf-req-loglist'));//图片懒加载
                        }}
                        current={currentPage}
                        total={logCount}
                        showSizeChanger
                        pageSizeOptions={['10', '20', '50', '100']}
                        onShowSizeChange={(c, p) => setLogPagesize({logpagesize: p})}
                        showTotal={logCount => getLabel(385617,`共 ${logCount} 条`).replace(`$s`,logCount)}
                    />
                  }
                  {
                    !loading 
                    && logList.length == 0 
                    && <div className='ant-table-placeholder' style={{borderBottom: 0}}>
                        {getLabel('386163',"暂时没有数据")}
                      </div>
                  }
                  {
                    loading 
                    && <div className='ant-table-placeholder' style={{borderBottom: 0}}>
                        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@ylgnx3`}/>
                      </div>
                  }
              </div>
          </div>
      )
  }
}
